<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Users</title>
<script src="scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="scripts/json.htmTable.js" type="text/javascript"></script>
<script src="scripts/json2.js" type="text/javascript"></script>
<link href="styles/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	function deleteCategory(categoryID) {
		if(confirm("Are you sure?")) {
			$.ajax({
				  url: '../categories/delete/' + categoryID,
				  success: function(data) {
					  alert('Entry deleted');
					  $('#content').load('categories.html');
				  }
				});
		}
	}
	$(document).ready(
			function() {
				$.ajax({
					  url: '../categories/read',
					  success: function(data) {
						  var objectData = jQuery.parseJSON(data);
						  var transformedData = new Array();
						  $.each(data, function(index, value) { 
							  var ops = "<a href='#' onclick=javascript:deleteCategory('" + value.id + "')>Delete</a> ";
							  transformedData[index] = {
									id: value.id,
									"Category Name": value.passwordCategoryName,
									operations: ops
							  } 
							});
						  $('#DynamicGrid').append(
									CreateTableView(transformedData, "lightPro", true)).fadeIn();
					  }
					});
				$('#DynamicGridLoading').hide();


			});
</script>

</head>
<body>
<h1>Categories</h1>
	<form id="form1">
		<div id="DynamicGrid" width="100%">
			<div id="DynamicGridLoading" width="100%">
				<img src="images/loading.gif" /><span> Loading Data... </span>
			</div>
		</div>
	</form>
</body>
</html>
